<template>
    <div class="common-layout">
        <el-container id="main-container">
            <!-- 左侧菜单 -->
            <el-aside width="70px" id="left-aside">
                <template v-for="item in menuList">
                    <div class="menu-item" 
                        :class="currentMenuItem.path === item.path? 'active':''"  
                        :style="{'color': item.name=='logging' && configStore.runningFlag? '#49e68d': ''}"
                        @click="changeMenu(item)">

                        <div :class="['tab-item iconfont', item.icon]" style="font-size: 30px;"></div>
                        <div style="font-size: 14px;">{{ item.title }}</div>
                    </div>
                </template>

            </el-aside>
            <!-- 右侧 -->
            <el-container>
                <el-main id="main-content">
                    <router-view></router-view>
                </el-main>
            </el-container>

        </el-container>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import {useConfigStore} from "../stores/config"
const configStore = useConfigStore()

const router = useRouter()

const menuList = ref([
    {
        name: 'startUp',
        title: "一键启动",
        path: '/startUp',
        icon: 'icon-start',
        
    },
    {
        name: 'category',
        title: "目录管理",
        path: '/category',
        icon: 'icon-anmuluchaolu-xianxing',
    },
    {
        name: 'category',
        title: "导航管理",
        path: '/navigation',
        icon: 'icon-category',
    },
    {
        name: 'logging',
        title: "日志",
        path: '/logging',
        icon: 'icon-terminal',
    },
    {
        name: 'setting',
        title: "高级设置",
        path: '/setting',
        icon: 'icon-shezhi',
    }
])

const currentMenuItem = ref(menuList.value[0]);

const headerBths = ref([]);
const changeMenu = (item) => {
    currentMenuItem.value = item
    router.push(item.path)
    headerBths.value = item.headerBths? item.headerBths: []
}




</script>

<style lang="scss" scoped>
.common-layout {
    height: 100vh;

    #main-container {
        height: 100%;
    }
}

#left-aside {
    background-color: #1b1b1b;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .menu-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 25px 0;
        padding: 10px 0;
        
        border-radius: 8px; /* 可选，圆角效果 */
  
    }
    .menu-item.active {
        background-color: #5d5f5f; /* 高亮时的背景颜色 */
    }

    .menu-item:hover {
        background-color: #454747;
        /* 根据需要选择合适的颜色 */
        cursor: pointer;
    }



}

#top-header {
    background-color: #2c2d2d;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: end;
}

#main-content {
    background-color: #383939;
    padding-top: 0;
    background-image: url(../assets/wavy-lines.svg);
}
</style>